<!DOCTYPE html>
<html lang="en">
<head>
    <title>滚滚向前投票助手</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="no-cache"/>
    <meta http-equiv="Expires" content="-1"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <style>
        textarea {
            width: 100%;
            font-size: 14px;
            line-height: 24px;
            padding: 5px 10px;
            height: 120px;
            border: 2px solid rgb(238, 238, 238);
            resize: none
        }

        .title {
            font-size: 14px;
            text-align: left;
            padding: 8px 0;
            font-weight: bold;
        }

        .radioItem {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }

        .radioItem i {
            height: 20px;
            width: 20px;
            border: 2px solid #ddd;
            border-radius: 50%;
            float: left;
            margin-top: 5px;
            margin-right: 10px;
        }

        .radioItem.active i {
            border: 2px solid #ddd;
            background: #228bee;
        }

        .radioItem span {
            color: red;
        }

        .mselect {
            border: 1px solid #bbb;
            border-radius: 6px;
            background: white;
            min-height: 17px;
            width: 100%;
            height: 27px;
            z-index: 103;
            color: #228bee;
            font-size: 14px;
            border-width: 1px;
            border-style: solid;
            font-weight: normal;
            font-style: normal;
        }

        select {
            padding: 0 8px;
            display: block;
            width: 100%;
            height: 100%;
            font-size: inherit;
            color: inherit;
            border: none;
            border-radius: inherit;
            outline: none;
            background: inherit;
            line-height: inherit;
        }

        .resultBox{
            position: relative;
        }
        .noSelectPop{
            position: absolute;
            z-index: 999;
            width: 100%;
            height: 100%;
            left:0;
            right:0;
            opacity: 0.6;
            background: #fff;
        }

    </style>
</head>
<body>
<section class="content" id="app" style="padding: 0px 20px;" v-cloak>
    <h3 style="text-align: center;font-size: 16px;">请输入驳回原因</h3>
    <textarea name="" id="" cols="30" rows="10" placeholder="请输入驳回原因" v-model="auditInfo"></textarea>
    <div class="title">是否重新指定第一名</div>
    <div :class="auditFlag==2?'radioItem active':'radioItem'" @click="auditFlag=2;"><i></i> 否 <span>（所有被投票人均不合格）</span>
    </div>
    <div :class="auditFlag==3?'radioItem active':'radioItem'" @click="auditFlag=3;"><i></i> 是
        <span>（已选出的第一名不合格，重新指定）</span></div>
    <div class="resultBox">
        <div class="noSelectPop" v-if="auditFlag==2"></div>
        <div class="title">重新指定第一名：</div>
        <div class="mselect">
            <select id="testMod" v-model="rejectInfo.assigner">
                <option v-for="user in userList" v-bind:value="user">{{user}}</option>
            </select>
        </div>

        <div class="title">请输入指定原因：</div>
        <textarea cols="30" rows="10" placeholder="请输入指定原因" v-model="rejectInfo.advice"></textarea>
    </div>

    <div class="oa-footer-btn" @click="save">确认</div>
</section>
<!--JQ-->

<script src="https://file.ggxqce.com/web/axios.min.js"></script>

<script src="/dist/js/newOaApp.js"></script>
<!--插件JS-->

<!--框架已定义 JS-->
<!--oa自定义  JS-->
<script type="text/javascript" src="/dist/plugins/vue/vue.js"></script>


<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            auditFlag: 2,
            auditInfo: '',
            rejectInfo: {
                mainId: getUrlParamObj().mainId,
                createUserId: getUrlParamObj().userId,
                createUserName: getUrlParamObj().userName,
                assigner: '',
                advice: '',
            },
            userList: [],
            oldOne: '',
            userId: getUrlParamObj().userId,
            mainId:getUrlParamObj().mainId,
            isGo:true

        },
        methods: {
            save: function () {
                var that = this;
                if (that.auditFlag == '2') {
                    if (this.auditInfo == '') {
                        JSBridge.call(UI, 'showToast', {title: "请填写原因！"})
                        return false;
                    }
                    JSBridge.call(UI, 'showLoading', {})
                    if (that.isGo) {
                        var data = {
                            id: that.mainId,
                            auditFlag: 2,
                            userId: that.userId,
                            advise: that.auditInfo
                        }
                        that.isGo = false;
                        axios.post('/vote/applyAudit.json', data)
                            .then(function (r) {
                                that.isGo = true;
                                JSBridge.call(UI, 'hideLoading')
                                JSBridge.call(UI, 'showToast', {title: "驳回成功！"})
                                var param = {
                                    backRefresh: true,       //是否返回刷新
                                }
                                JSBridge.call(ROUTER, 'navigateBack', param)
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    }
                }else{
                    if (this.auditInfo == '') {
                        JSBridge.call(UI, 'showToast', {title: "请填写原因！"})
                        return false;
                    }
                    if (this.rejectInfo.assigner == '') {
                        JSBridge.call(UI, 'showToast', {title: "请选择新的第一名！"})
                        return false;
                    }
                    if (this.rejectInfo.advice == '') {
                        JSBridge.call(UI, 'showToast', {title: "请填写指定原因！"})
                        return false;
                    }
                    JSBridge.call(UI, 'showLoading', {})
                    if (that.isGo) {
                        var data = {
                            id: that.mainId,
                            auditFlag: 3,
                            userId: that.userId,
                            advise: that.auditInfo,
                            reject:that.rejectInfo
                        }
                        that.isGo = false;
                        axios.post('/vote/applyAudit.json', data)
                            .then(function (r) {
                                that.isGo = true;
                                JSBridge.call(UI, 'hideLoading')
                                JSBridge.call(UI, 'showToast', {title: "驳回成功！"})
                                var param = {
                                    backRefresh: true,       //是否返回刷新
                                }
                                JSBridge.call(ROUTER, 'navigateBack', param)
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    }
                }

            }
        },
        mounted: function () {
            var that=this;
            axios.post('/vote/getResultList.json', {"mainId":that.mainId})
                .then(function (res) {
                    var list=res.result;
                    var userList=[];
                    for(var i=0;i<list.length;i++){
                            userList.push(list[i].name)
                    }
                    that.userList=userList
                    JSBridge.call(UI, 'hideLoading')
                })
                .catch(function (error) {
                    console.log(error);
                });

        }
        });

</script>

</body>